<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Create a new event</title>
<link rel="stylesheet" href="../style/layout.css" type="text/css" />
<link rel="stylesheet"
	href="../style/jqueryUI/ui-lightness/jquery-ui-1.8.16.custom.css"
	type="text/css" />
<link rel="stylesheet" href="../style/menu_style.css" type="text/css" />
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts/jqueryUI.js"></script>
<script type="text/javascript" src="../scripts/formViewer.js"></script>
<script type="text/javascript" src="../scripts/clock.js"></script>
</head>
<body onload="updateClock(); setInterval('updateClock()',1000)">
	<%@ include file="/include/header.jsp"%>
	<div id="mainContainer">
		<div id="mainContent">
		<div id="formContainer">
				<html:form action="/registered/updateEvent" styleId="eventForm">
						<fieldset>
							<legend>
								<b>Edit event:</b>
							</legend>
							<html:hidden property="eventId" />
							<label for="eventName">Event name</label>
							<html:text property="eventName" size="50"/>
							<span id="error"><html:errors property="eventName" /></span> <br /> 
							<label for="date">Date(mm/dd/yyyy)</label>
							<html:text property="date" styleId="datepicker" />
							<span id="error"><html:errors property="date" /></span> <br /> 
							<label for="time">Time(hh:mm, 24hr)</label>
							<html:text property="time" />
							<span id="error"><html:errors property="time" /></span> <br /> 
							<label for="desc">Event description</label> <br />
							<html:textarea rows="3" cols="30" property="desc"></html:textarea>
							<span id="error"><html:errors property="desc" /></span> <br /> 
							<label for="minCapacity">Minimum number of participants</label>
							<html:text property="minCapacity" />
							<span id="error"><html:errors property="minCapacity" /></span> <br /> 
							<label for="maxCapacity">Maximum number of participants (optional)</label>
							<html:text property="maxCapacity" />
							<span id="error"><html:errors property="maxCapacity" /></span> <br /> 
							<label for="venue">Venue</label>
							<html:select property="venue" styleId="venue">
<%-- 								<html:option value="0" styleId="defaultOption">Choose a venue</html:option>
								<c:forEach var="venue" items="${ venueList }">
									<option value="<c:out value='${venue.getId()}'/>"
										<c:if test="${venue.getIdString().equals(formValues.venue)}"> selected="selected" </c:if>>
										<c:out value="${venue.getName()}" />
									</option>
								</c:forEach> --%>
								<html:optionsCollection property="venueList" />
							</html:select>
							<span id="error">${ errorMessages.venue }</span>
							<a href="createVenue.do" id="venueLink">Create new venue?<div id="modalBox" title="Create new venue:"></div></a><br/>
							<html:submit value="Edit event" styleId="submitEventButton" />
						</fieldset>
					</html:form>
				</div>
			</div>
			<%@ include file="/include/menu.jsp" %>
		</div>
	<script type="text/javascript">
     $(document).ready(function() {
            $("#datepicker").datepicker();
          });
    </script>
    
    	<script type="text/javascript">
		$(document).ready(function(){
			$('#venueLink').click(function(event)
				{
					event.preventDefault();
					$('#modalBox').dialog({
						height: 300,
						width: 300,
						modal: true
					});
					$.ajax({
	                    url: "createVenue.do",
	                    success: function(data){
	                        $('#modalBox').html(data);
	                    }
	            });
				});
		});
		
	</script>
    
</body>
</html>